<template>
    <div class="edit-box" teleport="body">
        <h3>修改操作人员数据</h3>
        <el-form :model="editAdminForm" label-width="120px">

            <el-form-item label="管理员id">
                <span>{{ editAdminForm.adminid }}</span>
            </el-form-item>
            <el-form-item label="管理员姓名">
                <span>{{ editAdminForm.adminname }}</span>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="editAdminForm.password" placeholder="请输入密码（6-18位任意字符）" :show-password="true" />
            </el-form-item>
            <el-form-item label="管理员权限">
                <el-radio-group v-model="editAdminForm.role">
                    <el-radio label="1" size="large">超级管理员</el-radio>
                    <el-radio label="2" size="large">普通管理员</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="权限页面修改">
                <el-tree ref="treeRef" :data="data" show-checkbox node-key="id" highlight-current accordion />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">修改</el-button>
                <el-button type="info" @click="cancelData">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">

import { reactive, watch, ref } from 'vue'
import service from '../../../utils/service';
import type { AxiosResponse } from 'axios';
import { ElMessage, ElTree } from "element-plus";
import { menuData as data } from '../../../grants/menuData';
import type { TreeKey } from "element-plus/es/components/tree/src/tree.type"

type IEditAdminForm = {
    "adminid": string,
    "adminname": string,
    "password": string,
    "role": string,
    "checkedKeys": string[],
}
const editAdminForm = reactive<IEditAdminForm>({
    "adminid": '',
    "adminname": '',
    "password": '',
    "role": "",
    "checkedKeys": [],
})
// 路由对象
// 修改管理员信息
let treeRef = ref<InstanceType<typeof ElTree>>()
const onSubmit = () => {
    let arr: TreeKey[] = treeRef.value!.getCheckedKeys()
    editAdminForm.checkedKeys = arr as string[]
    let pwdReg = /^.{6,18}$/
    if (pwdReg.test(editAdminForm.password)) {
        service({
            url: `/admin/update`,
            method: "post",
            data: editAdminForm
        }).then((res: AxiosResponse) => {
            if (res.data.code === "200") {
                ElMessage({
                    showClose: true,
                    message: "修改成功",
                    type: "success"
                })
                emits("hide")
            }
        })
    } else {
        ElMessage({
            showClose: true,
            message: "情输入格式正确的密码！",
            type: "warning"
        })
    }
}
const props = defineProps<{
    adminName: string
}>()


// 根据adminname 发请求获取数据
const getUserDetail = () => {
    service({
        url: `/admin/detail`,
        params: {
            adminname: props.adminName
        }
    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            editAdminForm.adminid = res.data.data[0].adminid
            editAdminForm.adminname = res.data.data[0].adminname
            editAdminForm.role = res.data.data[0].role
            editAdminForm.checkedKeys = res.data.data[0].checkedKeys
            console.log("res.data.data[0].checkedKeys", res.data.data[0].checkedKeys);
            editAdminForm.password = ""
            let arr: any = []
            for (let i = 0; i < editAdminForm.checkedKeys.length; i++) {
                if (editAdminForm.checkedKeys[i].length == 5 || editAdminForm.checkedKeys[i] == "1") {
                    arr.push(editAdminForm.checkedKeys[i])
                    editAdminForm.checkedKeys.splice(i, 1)
                    i--
                }
            }
            console.log("arr", arr, arr.length);
            let flag: boolean
            let arrNew = arr.filter((item: string) => item.length == 5)
            editAdminForm.checkedKeys.forEach(item => {
                if (item.length == 3) {
                    // 判断所有的是否符合条件
                    flag = arrNew.every((sonItem: string) => {
                        return sonItem.slice(0, 3) != item
                    })
                    console.log("flag", flag);

                    if (flag) {
                        arr.push(item)
                    }
                }
            })
            console.log("arr", arr);
            editAdminForm.checkedKeys = arr
            treeRef.value!.setCheckedKeys(editAdminForm.checkedKeys)
        }
    })
}

watch(props, () => {
    getUserDetail()
}, {
    deep: true
})
// 定义事件 点击修改框消失

const emits = defineEmits<{
    (e: "hide"): void
}>()
// 清空表单数据

const cancelData = () => {
    // let key: keyof IEditAdminForm;
    // for (key in editAdminForm) {
    //     if (editAdminForm[key] as string) {
    //         (editAdminForm[key] as string) = "";
    //     } else {
    //         (editAdminForm[key] as string[]) = [];
    //         treeRef.value!.setCheckedKeys(editAdminForm[key] as string[])
    //     }
    // }
    emits("hide")
}
</script>
<style scoped>
.edit-box {
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    border: 1px solid #999;
    box-shadow: #ccc 0px 0px 10px;
}

.edit-box h3 {
    text-align: center;
}

.edit-box .el-form {
    padding: 10px;
}

.el-tree {
    background-color: rgba(0, 0, 0, 0);
    overflow: auto;
    height: 150px;
}
</style>